<template>
	<view>
		<view v-for="(item,index) in list" :key="index" class="viewItem">
			<image :src="$global.getImageUrl(item.headImg, 'https://ourydcimage.shenghua6.cn')" mode="" class="headImg">
			</image>
			<div class="left">
				<p class="name">{{item.roomName}}</p>
			</div>
			<view class="btn" @click="batchAttentionUser(item.roomManager,index)" v-if="item.isAttention!=1">关注</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				userId:'',
				url: '',
				isMember: 0,
				randomSize: 0,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				list: [],
				userData: [],
				priceData: [],
				page: 1,
				isLoadMore: false //是否加载中
			}
		},
		mounted() {
			this.list=[]
		},
		onShow() {
			this.list=[]
			this.loadMoreFunc()
			var that=this
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					that.userId=res.data.userId
			    }
			});
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page++
				this.loadMoreFunc();
			}

		},
		methods: {
			loadMoreFunc() {
				this.status = 'loading';
				var data = {
					url: '/web/v2/api/chatRoomExtend/chatRoomAccessRecords',
					methods: 'post',
					data: {
						page: this.page,
						rows:20
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						if (res.data.data.AccessRecordList) {
							this.list = this.list.concat(res.data.data.AccessRecordList)
							if (res.data.data.AccessRecordList.length == 0||res.data.data.AccessRecordList.length<20) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.status = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.status = 'nomore'
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
					}
				})
			},
			batchAttentionUser(toUserId,index) {
				var data = {
					url: '/web/v2/api/user/batchAttentionUser',
					methods: 'post',
					data: {
						userId:this.userId,
						toUserIds: toUserId
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.isLoadMore = true
						uni.showToast({
							title: '关注成功~',
							icon: 'none'
						})
						this.list[index].isAttention=1
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.viewItem {
		display: flex;
		align-items: center;
		margin-bottom: 36upx;

		.headImg {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-left: 21upx;
		}

		.name {
			font-size: 28upx;
			color: #333333;
		}

		.left {
			margin-left: 19upx;
			margin-right: 2.2upx;
		}
		.btn {
			width: 60upx;
			height: 36upx;
			line-height: 36upx;
			text-align: center;
			border-radius: 18upx;
			font-size: 22upx;
			color: #FFFFFF;
			background-image: linear-gradient(90deg, #FF4058 0%, #FF885C 100%);
			margin-left: auto;
			margin-right: 20upx;
		}
	}
</style>
